<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>搜索分析- 搜索结果分析</title>
<meta name="description" content="overview &amp; stats" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet"  href="${request.contextPath}/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="${request.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="${request.contextPath}/assets/css/jquery-ui.custom.min.css" />
<link rel="stylesheet" href="${request.contextPath}/assets/css/jquery.gritter.min.css" />
<link rel="stylesheet" href="${request.contextPath}/assets/fonts/fonts.googleapis.com.css" />
<link rel="stylesheet" href="${request.contextPath}/assets/css/bootstrapValidator.min.css" />
<link rel="stylesheet" href="${request.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
<link rel="stylesheet" href="${request.contextPath}/assets/css/bsie-paginator.css" />
<link rel="stylesheet" href="${request.contextPath}/stylesheets/daterangepicker.css">
<link rel="stylesheet" href="${request.contextPath}/stylesheets/loading.css" />
<link rel="stylesheet" href="${request.contextPath}/stylesheets/tips.css"/>
</head>
<style>
 tr,th{text-align: center;}
 a:hover{color:blue;text-decoration: none;}
</style>
<body class="no-skin" style="background-color: #FFF;">
	<div class="page-content">
		<div class="tabbable">
			<div class="tab-content">
				<div id="manage" class="tab-pane active in">
					<div class="row">
						<div class="col-xs-12">
						<!-- <a href="/rhino/searchStatistic/resultAnalysis" id="iframeReload"> <i class="ace-icon fa fa-refresh" style="font: normal normal normal 25px/1 FontAwesome;float:right;"></i></a>
						 --><!-- 筛选条件开始 -->
							<div class="row">
								<div class="col-xs-12">
									<div class="widget-box">
										<div class="widget-header widget-header-small">
											<h4 class="widget-title">搜索结果分析(PV)</h4>
										</div>
										<div class="widget-body" style="background-color: #EFF3F8;">
											<div class="widget-main">
												<form class="form-inline" id="searchForm" method="post" action="#">
													<div class="form-group">
														<label for="exampleInputName2">选择时段
															<input type="text" id="config-demo" name="chooseTime" class="form-control time">
															<button id="app_search" type="button"  onclick="replaceDate(this,'1');" class="btn btn-white btn-sm">
																<span class="ace-icon icon-on-right bigger-110"></span>
																昨日
															</button>
															<button id="app_search" type="button"  onclick="replaceDate(this,'7');" class="btn btn-white btn-sm">
																<span class="ace-icon icon-on-right bigger-110"></span>
																过去7天
															</button>
															<button id="app_search" type="button"  onclick="replaceDate(this,'31');" class="btn btn-white btn-sm">
																<span class="ace-icon icon-on-right bigger-110"></span>
																过去31天
															</button>
														</label>
														<label for="exampleInputName" style="margin-left: 30px;">分站：
															<select class="chosen-select" tabindex="2"  name="station_id" id="station_id" style="width:80px;">
																<option value="0">全部</option>
																<#if stationList?? && stationList?size&gt;0>
																	 <#list stationList as item>
																		<option value="${item.stationId}" <#if item.stationName == '上海'>selected</#if> >${item.stationName}</option>
																	 </#list>
																 </#if>
															</select>
														</label>
														
														<label for="exampleInputName" style="margin-left: 30px;">平台：
															<select class="chosen-select" tabindex="2" name="platform_code" id="platform_code" style="width:80px;">
																<option value="">全部</option>
																<!-- <option value="pc">PC</option> -->
																<option value="app">APP</option>
																<option value="wap">WAP</option>
															</select>
														</label>
														
														<button id="search" type="button" class="btn btn-pink btn-sm"  style="margin-left: 50px;">
															<span class="ace-icon fa fa-search icon-on-right bigger-110"></span> Search
														</button>
													</div>
												</form>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- 筛选条件结束 -->
							
							<div class="row">
								<div class="col-sm-6">
									<div class="widget-box">
										<div class="widget-header widget-header-flat">
											<h4 class="widget-title lighter">
												<i class="ace-icon fa fa-star orange"></i>品类搜索无结果统计
											</h4>
											<span style="font-size: 10px;">(视图可点击！！)</span>
											<label class="help_img">
												<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
												<span class='tips'>一段时间内直接输入与补全点击进入各品类搜索无结果的搜索总次数<s></s></span>
											</label>
										</div>
										<div class="widget-header widget-header-small">
											<div id="statistical-chart" style="height: 400px;"></div>
										</div>
									</div>
								</div>
								<div class="col-sm-6"  style="padding-left: 0px!important;">
									<div class="widget-box">
										<div class="widget-header widget-header-flat">
											<h4 class="widget-title lighter">
												<i class="ace-icon fa fa-signal  blue"></i>品类搜索无结果趋式
											</h4>
											<label class="help_img">
												<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
												<span class='tips'>一段时间内直接输入与补全点击进入各品类搜索无结果的逐日搜索次数<s></s></span>
											</label>
										</div>
										<div class="widget-header widget-header-small">
											<div id="tendency-chart" style="height: 400px;"></div>
										</div>
									</div>
								</div>
							</div>
							
							<div class="row"  style="padding-top: 5px;" id="tableByClick">
								<div class="col-xs-6">
									<div class="widget-box">
										<div class="widget-header widget-header-small">
											<h4 class="widget-title"><i class="ace-icon fa fa-star orange"></i>品类:<span id="categoryName"></span></h4>
											<label class="help_img">
												<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
												<span class='tips'>一段时间内某一品类直接输入与补全点击进入搜索结果页搜索无结果的各关键词搜索无结果次数与无结果跳出次数<s></s></span>
											</label>
											<input type="hidden" id="categoryValue" >
										</div>
										<div class="widget-body">
											<div class="widget-main no-padding">
												<table class="table table-bordered table-striped">
													<thead class="thin-border-bottom">
														<tr>
															<th> <i class="ace-icon fa fa-caret-right blue"></i>序号</th>
															<th> <i class="ace-icon fa fa-caret-right blue"></i>关键词</th>
															<th class="hidden-480"><i class="ace-icon fa fa-caret-right blue"></i>无结果次数(PV)</th>
															<th class="hidden-480"><i class="ace-icon fa fa-caret-right blue"></i>无结果跳出次数(UV)</th>
														</tr>
													</thead>
													<tbody class="tbody"> </tbody>
												</table>
												
												<div class="ui-jqgrid">
													<div id="grid-pager"
														class="ui-state-default ui-jqgrid-pager ui-corner-bottom"
														dir="ltr">
														<div id="pg_grid-pager" class="ui-pager-control" role="group">
															<input type="text" id="currentPage" hidden="true" value=1>
															<input type="text" id="page_size" value =10 hidden="true">
															<input type="text" id="page_total" hidden="true">
															<table cellspacing="0" cellpadding="0" border="0"
																class="ui-pg-table"
																style="width: 100%; table-layout: fixed; height: 100%;"
																role="row">
																<tbody>
																	<tr>
																		<td id="grid-pager_left" align="left"></td>
																		<td id="grid-pager_center" align="center"
																			style="white-space: pre; width: 343px;"><table
																				cellspacing="0" cellpadding="0" border="0"
																				style="table-layout: auto;" class="ui-pg-table">
																				<tbody>
																					<tr>
																						<td id="first_grid-pager"
																							onclick="showPage('firstPage')"
																							class="ui-pg-button ui-corner-all "
																							style="cursor: pointer;"><span
																							class="ui-icon ace-icon fa fa-angle-double-left bigger-140"></span></td>
																						<td id="prev_grid-pager"
																							onclick="showPage('prePage')"
																							class="ui-pg-button ui-corner-all "
																							style="cursor: pointer;"><span
																							class="ui-icon ace-icon fa fa-angle-left bigger-140"></span></td>
																						<td dir="ltr">Page <input class="ui-pg-input" id="page_num"
																							type="text" size="2" maxlength="7" disabled="true" 
																							value="" role="textbox"> of <span
																							id="sp_1_grid-pager"></span></td>
																						<td id="next_grid-pager"
																							onclick="showPage('nextPage')"
																							class="ui-pg-button ui-corner-all "
																							style="cursor: pointer;"><span
																							class="ui-icon ace-icon fa fa-angle-right bigger-140"></span></td>
																						<td id="last_grid-pager"
																							onclick="showPage('lastPage')"
																							class="ui-pg-button ui-corner-all "
																							style="cursor: pointer;"><span
																							class="ui-icon ace-icon fa fa-angle-double-right bigger-140"></span></td>
																					</tr>
																				</tbody>
																			</table></td>
																			
																		<td id="grid-pager_right" align="right">
																				<div dir="ltr" style="text-align: right" class="ui-paging-info">View
																					<span id="view_start_row"></span> - <span id="view_end_row"></span> 
																					of <span id="view_page_total"></span>
																				</div>
																		</td>
																	</tr>
																</tbody>
															</table>
														</div>
													</div>
												</div>
												
											</div>
										</div>
									</div>
								</div>
								</div>
						   </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	<script src="${request.contextPath}/assets/js/ace-extra.min.js"></script>
	<script src="${request.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
	<script src="${request.contextPath}/assets/js/bootstrap.min.js"></script>
	<script src="${request.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
	<script src="${request.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
	<script src="${request.contextPath}/assets/js/bootbox.min.js"></script>
	<script src="${request.contextPath}/assets/js/jquery.gritter.min.js"></script>
	<script src="${request.contextPath}/assets/js/spin.min.js"></script>
	<script src="${request.contextPath}/assets/js/ace-elements.min.js"></script>
	<script src="${request.contextPath}/assets/js/ace.min.js"></script>
	<script src="${request.contextPath}/assets/js/bootstrapValidator.min.js"></script>
	<script src="${request.contextPath}/assets/js/user/base.js"></script>
	<script src="${request.contextPath}/assets/js/moment.min.js"></script>
	<script
		src="${request.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
	<script src="${request.contextPath}/assets/js/jquery.gritter.min.js"></script>
	<script type="text/javascript"
		src="${request.contextPath}/javascripts/moment.js"></script>
	<script type="text/javascript"
		src="${request.contextPath}/javascripts/daterangepicker.js"></script>
	<script type="text/javascript" src="${request.contextPath}/javascripts/dateRange.js"></script>
	<script src="${request.contextPath}/assets/js/d3.v3.min.js"></script>
	<script type="text/javascript" src="${request.contextPath}/javascripts/loading.js"></script>
		
	<script type="text/javascript" src="${request.contextPath}/javascripts/g2.js"></script>
	<script type="text/javascript" src="${request.contextPath}/javascripts/g2-modal.js"></script>
	<script type="text/javascript" src="${request.contextPath}/javascripts/slider.js"></script>	
	<script type="text/javascript" src="${request.contextPath}/javascripts/FileSaver.js"></script>
	<script type="text/javascript" src="${request.contextPath}/javascripts/export-csv.js"></script>
	<script type="text/javascript">
	d3.select(self.frameElement).style("height", "1200px");
	$(document).ready(function(){
		getSearchDate();
	});
	$("#search").on("click",function(){
		getSearchDate();
	});
	function getSearchDate(){
		var choose_date = $("#config-demo").val();
		var platform_code = $("#platform_code").val();
		var station_id =  $("#station_id").val();
		$.ajax({
			url : '${request.contextPath}/searchStatistic/resultAjaxData',
			type : "POST",
			data : {
				// choose_date:choose_date,
                beginDate:choose_date.split("-")[0]+" 00:00:00",
                endDate:choose_date.split("-")[1]+" 23:59:59",
				platformCode:platform_code,
				stationId:station_id
			},
			beforeSend: function(){
 			   $("#search").attr("disabled",true);
				openPartialLayer($("#tendency-chart"));
				openPartialLayer($("#statistical-chart"));
	    	 },
		    complete: function(){
		    	$("#search").attr("disabled",false);
				removeLoading($("#tendency-chart"));
				removeLoading($("#statistical-chart"));
		    },
			success:function(data) {
                if(data.code!=0){
                    return;
                }
                var data = data.data
				var defs = {
						'category': {
							alias : '品类'
						},
						'amount': {
							alias :'次数（次）'
						},
						'time':{
							type: 'time',
							tickCount: 8
						}
					}; 
			    var chart = histogramModal(data.barData,'statistical-chart','category','amount','品类','次数（次）','400',defs);
			    if(data.barData != "" && data.barData != null){
			      chart.on('plotclick',function(ev){
					  var data = ev.data;
					  if (data) {
					    var name = data._origin['category'];
					    forwardWay(name);
					  }
					});
					 $("#statistical-chart").css("cursor","pointer");
					 $("#tableByClick").show();
					 var dataFirst = chart.getAllGeoms()[0].getData()[0];
					 forwardWay(dataFirst._origin['category']);
			    }else{
			    	$("#tableByClick").hide();
			    }
			    lineChartModal(data.lineData,'tendency-chart','time','amount','category','','次数（次）','400',defs);
			},
			error:function(data) {
				//showMsg("查询数据有误");
			}
		});
	}
	
	function forwardWay(category_name){
		var page_size=$("#page_size").val();
		getDataByKey(category_name,1,page_size);
	}
	
	function getDataByKey(category_name,currentPage,page_size){
		var choose_date = $("#config-demo").val();
		var platform_code = $("#platform_code").val();
		$("#categoryName").html(category_name);
		var station_id =  $("#station_id").val();
		$.ajax({
			url : '${request.contextPath}/searchStatistic/resultKeyAjaxData',
			type : "POST",
			dataType:"json",
			data : {
				// choose_date:choose_date,
                beginDate:choose_date.split("-")[0]+" 00:00:00",
                endDate:choose_date.split("-")[1]+" 23:59:59",
				platformCode:platform_code,
				categoryName : category_name,
				stationId:station_id,
                pageCurrentNum:currentPage,
				pageSize:page_size
			},
			beforeSend: function(){
				openPartialLayer($("#tableByClick"));
	    	 },
		    complete: function(){
				removeLoading($("#tableByClick"));
		    },
			success:function(data) {
                if(data.code!=0){
                    return;
                }
                var page = data.data
			   if(page && page.list && page.list != ""){
			   		// var page=data.page;
			    	if(page.pages >1){
			    		$("#page_total").val(page.pages);
				    	$("#currentPage").val(page.pageNum);
				    	$("#page_num").val(page.pageNum);
				    	$("#sp_1_grid-pager")[0].innerText=page.pages;
				    	$("#view_start_row")[0].innerText= page.startRow;
				    	$("#view_end_row")[0].innerText= page.endRow;
				    	$("#view_page_total")[0].innerText= page.total;
				    	$(".ui-jqgrid").show();
			    	}else{
			    		$(".ui-jqgrid").hide();
			    	}
			  		var tbody = "";
			   		$.each(page.list,function(n,value) {
				       tbody +=  "<tr>"+
									"<td>"+ (n+1) +"</td>"+
									"<td><small>"+value.keyWord +"</small></td>"+
									"<td class='hidden-480'>"+ value.amountPV+"</td>"+
									"<td class='hidden-480'>"+ value.amountUV+"</td>"+
								"</tr>";  
			       });
			   }else{
			   		var tbody='<tr><td colspan="12"><div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div></td></tr>';
			   }
			    $(".tbody").html(tbody); 
			    $("#tableByClick").show();
			},
			error:function(data) {
				//showMsg("查询数据有误");
			}
		});
	}
	
	function showPage(param) {
        var endrow = parseInt($("#sp_1_grid-pager")[0].innerText);
        var currentPage = parseInt($("#currentPage").val());
        var page_size = $("#page_size").val();
		var category_name = $("#categoryName").html();
		var flag = 0;
		if('firstPage'==param) {
			currentPage =1;
		}
		else if('prePage'==param) {
			if(currentPage==1){
				currentPage ==1;
				flag = 1;
			}else{
				currentPage = currentPage-1;
			}
		}
		else if('nextPage'==param) {
			if(currentPage==endrow){
				currentPage = endrow;
				flag = 1;
			}else{
				currentPage = currentPage+1;
			}
		} else if('lastPage'==param) {
			currentPage = endrow; 
		}
		if(flag==0){
			getDataByKey(category_name,currentPage,page_size);
		}
	}
	
 </script>
</body>
</html>